<!DocType html>
<html>
	<head>
		<title>demo</title>
		<style>
		.editable{
			width:300px;
			height: 200px;
			border: 1px solid #ffddcc;
		}
		.toolbar{
			margin-top: 15px;
			margin-bottom: 1px;
			width:640px;
			height: 80px;
			border: 1px solid cornflowerblue;
		}
		.toolbar ul,.toolbar li{
			padding: 0;
			margin: 0;
			list-style: none;			
		}
		.toolbar li{
			float: left;
			text-align: center;
			min-width: 42px;
			min-height: 32px;
			background-color: #cceeff;
			margin-left: 10px;
			margin-top:5px;
			cursor: default;
		}
		</style>
	</head>
    <body>
		<form>
			<input type="text"><br>
			<input type="text" name="tb2">
		</form>

	<div class="toolbar">
		<ul>
			<li id="copy">copy</li>
			<li id="cut">cut</li>
			<li id="paste">paste</li>
			<li id="bold">bold</li>
			<li id="italic">italic</li>
			<li id="createlink">createlink</li>
			<li id="formatblock">formatblock</li>
		</ul>
	</div>
	<iframe name="richedit" style="height:350px;width:640px;" src="blank.htm"></iframe>
	<div class="editable" id="richedit2" contenteditable>

	</div>
	<script src="../js/EventUtil.js"></script>
	<script>
	 EventUtil.addHandler(window, "load", function(){
		 console.log(frames["richedit"]);
		 console.log(frames["richedit"].document);
		 frames["richedit"].document.designMode = "on";
	 });

	 var lis = document.getElementsByTagName("li");
	 for(var i=0;i<lis.length;++i)
	 {
		 var li= lis[i];
		 EventUtil.addHandler(li, "click",function(event){
			 var target=EventUtil.getTarget(event);
			 console.log(target);
			 var fontsize = frames["richedit"].document.queryCommandValue("fontsize");
			 console.log(fontsize);
			 switch(target.id){
				 case "bold":
					 frames["richedit"].document.execCommand("bold",false,null);
					 //document.execCommand("bold",false,null);// contenteditable的div中
				 	break;
				 case "italic":
				 	frames["richedit"].document.execCommand("italic",false,null);
				 	break;
				 case "createlink":
				 	frames["richedit"].document.execCommand("createlink",false,"http://www.wrox.com");
				 	break;
				 case "formatblock":
				 	frames["richedit"].document.execCommand("formatblock",false,"<h1>");
				 	break;
				 case "copy":
				 	frames["richedit"].document.execCommand("copy",false,null);
				 	break;
				 case "cut":
				 	frames["richedit"].document.execCommand("cut",false,null);
				 	break;
				 case "paste":
				 	frames["richedit"].document.execCommand("paste",false,null);
				 	break;
			 }
			 
		 });
	 }
	 
     </script>
    </body>
</html>